<template>
  <div class="wrapper" id="page_wrapper">
    <!-- 顶部搜索 -->
    <div class="search_top">
      <n-switch v-model:value="checked">
        <template #checked>弹窗模式</template>
        <template #unchecked>页面路由模式</template>
      </n-switch>
      <filterGroup
        :filter-options="filterOptions"
        :form-props="{ labelWidth: 190, labelAlign: 'right' }"
        @search="search"
      ></filterGroup>
    </div>

    <!-- 表格额外操作栏 -->
    <n-space justify="end" class="operate_box">
      <n-button @click="openModalOrPage({ modalOrPageType: '新增' })">新增</n-button>
    </n-space>

    <!-- 表格 -->
    <div class="table_box">
      <n-data-table :columns="coloumns" :data="tableData.data"></n-data-table>
      <n-space justify="end" style="margin-top: 16px">
        <n-pagination
          show-quick-jumper
          show-size-picker
          :item-count="tableData.total"
          :page-sizes="[10]"
          :page="tableParams.pageNo"
          :page-size="tableParams.pageSize"
          @update:page="handleUpdatePage"
          @update:page-size="changePageSize"
        />
      </n-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTablePageModal } from './model'

import filterGroup from '../components/filterGroup.vue'

const {
  checked,
  coloumns,
  tableData,
  tableParams,
  filterOptions,
  search,
  openModalOrPage,
  handleUpdatePage,
  changePageSize
} = useTablePageModal()
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #fafafafa;

  .search_top {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
  }

  .operate_box {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
  }

  .table_box {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
  }
}
</style>
